//博客的头部导航链接
var Style = require('./../../../assets/css/headerlink.css')
var Side = require('./side.js')
var Footer =  require('./footer.js')
var React = require('react');
var NavLink = require('./navlink.js');
//引如一个自己通过link内置属性定义的组件，省去多次写activeclass
var IndexLink = require('react-router').IndexLink;//内置的激活状态的标签
var Link = require('react-router').Link;

class HeaderLink extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
        };
    }
    render() {
        
        return (
            <div>
                <nav className="header navbar" id="header">
                    <div className="logo">
                        <IndexLink to="/" href="javascript:void(0);"><img src="http://oyrvhcwx8.bkt.clouddn.com/fox.ico" alt="hideer"/></IndexLink>
                    </div>
                    <div className="header-word-y">
                            <IndexLink to="/" activeClassName="active" className="visible-md-inline-block visible-lg-inline-block">
                                     隐士
                                <span></span>
                                hideer For luckey！
                            </IndexLink>
                        <span className="top-interval visible-md-inline-block visible-lg-inline-block"></span>
                            <IndexLink to="/essay" activeClassName="active">文章
                                <span className="interval"></span>
                            </IndexLink>
                        <span className="top-interval"></span>
                            <NavLink to="/archivedfile">目录
                                <span className="interval"></span>
                            </NavLink>
                        <span className="top-interval"></span>
                            <IndexLink to="/message" activeClassName="active">Tips
                                <span className="interval"></span>
                            </IndexLink>
                        <span className="top-interval"></span>
                            <IndexLink to="/indexx" activeClassName="active">留言 
                                <span className="interval"></span>
                            </IndexLink>
                        <span className="top-interval"></span>
                            <IndexLink to="/indexx" activeClassName="active">关于
                                <span className="interval"></span>
                            </IndexLink>
                        <span className="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                        <a href="javascript:void(0);" className="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i className="iconfont">&#xe634;</i></a>
                        <span className="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                        <a href="javascript:void(0);" className="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i className="iconfont">&#xe62a;</i></a>
                        <span className="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                        <a href="javascript:void(0);" className="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i className="iconfont">&#xe7dd;</i></a>
                        <span className="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                        <a href="javascript:void(0);" className="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i className="iconfont">&#xe616;</i></a>
                    </div>
                </nav>
                <Side></Side>
                {/*路由变化的页面*/}
                {this.props.children}
                <Footer></Footer>
            </div>
        );
    }
}

module.exports = HeaderLink;